<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Color Emoji support in OpenType</title><style type="text/css">
      body {
        font-family: arial, sans, sans-serif;
        margin: 0;
      }

      #contents {
        width: 500pt;
        margin: auto;
      }
    </style></head><body><div id="contents"><style type="text/css">@import url('https://themes.googleusercontent.com/fonts/css?kit=eKO97WyTO7HYidizp9G_uJx1zl7nAc-ROjLTUd_E0Dk');ol{margin:0;padding:0}.c7{vertical-align:top;width:120pt;border-style:solid;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c4{vertical-align:top;width:87pt;border-style:solid;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c8{vertical-align:top;width:261pt;border-style:solid;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c10{max-width:468pt;background-color:#ffffff;padding:72pt 72pt 72pt 72pt}.c0{line-height:1.0;direction:ltr}.c13{font-size:24pt;font-family:"Oswald"}.c12{color:inherit;text-decoration:inherit}.c11{color:#1155cc;text-decoration:underline}.c2{direction:ltr}.c1{border-collapse:collapse}.c9{font-weight:bold}.c3{height:11pt}.c5{font-style:italic}.c14{padding-top:0pt}.c6{height:0pt}.title{padding-top:24pt;line-height:1.15;text-align:right;color:#000000;font-size:24pt;font-family:"Oswald";font-weight:bold;padding-bottom:6pt}.subtitle{padding-top:18pt;line-height:1.15;text-align:right;color:#666666;font-size:12pt;font-family:"PT Sans";padding-bottom:4pt}li{color:#000000;font-size:11pt;font-family:"PT Sans"}p{color:#000000;font-size:11pt;margin:0;font-family:"PT Sans"}h1{padding-top:24pt;line-height:1.15;text-align:left;color:#000000;font-size:18pt;font-family:"PT Sans";font-weight:bold;padding-bottom:6pt}h2{padding-top:18pt;line-height:1.15;text-align:left;color:#000000;font-size:14pt;font-family:"PT Sans";font-weight:bold;padding-bottom:4pt}h3{padding-top:14pt;line-height:1.15;text-align:left;color:#666666;font-size:12pt;font-family:"PT Sans";font-weight:bold;padding-bottom:4pt}h4{padding-top:12pt;line-height:1.15;text-align:left;color:#666666;font-style:italic;font-size:11pt;font-family:"PT Sans";padding-bottom:2pt}h5{padding-top:11pt;line-height:1.15;text-align:left;color:#666666;font-size:10pt;font-family:"PT Sans";font-weight:bold;padding-bottom:2pt}h6{padding-top:10pt;line-height:1.15;text-align:left;color:#666666;font-style:italic;font-size:10pt;font-family:"PT Sans";padding-bottom:2pt}</style><p class="c2 title"><a name="h.favz6493jjo"></a><span class="c13">Color Emoji support in OpenType</span></p><p class="c2 c14 subtitle"><a name="h.n89l742rxacg"></a><span>Behdad Esfahbod and Stuart Gill<br>Google</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>In this proposal we specify how to extend OpenType to allow fonts with embedded color images as glyphs.</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>One of the goals of this proposal is to reuse the existing structures of EBDT / EBLC tables and introduce</span><span>&nbsp;new values for the existing fields where </span><span>feasible</span><span>. &nbsp;If and when this proposal is merged into the OpenType standard, the new features will be used with EBDT / EBLC tables proper. &nbsp;Until then, two new tables are introduced:</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>Add two new tables CBDT / CBLC that are backward compatible with </span><span class="c11"><a class="c12" href="http://www.microsoft.com/typography/otspec/ebdt.htm">EBDT</a></span><span>&nbsp;/</span><span class="c11"> <a class="c12" href="http://www.microsoft.com/typography/otspec/eblc.htm">EBLC</a></span><span> respectively, but add new formats for supporting color bitmaps.</span></p><h1 class="c2"><a name="h.v6iqmfbh6voj"></a><span>Uncompressed color bitmaps</span></h1><p class="c2"><span>In this extension, we allocate the value ‘32’ of the bitDepth field of bitmapSizeTable struct defined in the EBLC table, when used in the CBLC table, to identify color bitmaps with 8-bit blue/green/red/alpha channels per pixel, encoded in that order for each pixel (referred to as BGRA from hereon). &nbsp;The color channels represent </span><span class="c5">pre-multiplied</span><span>&nbsp;color and are encode colors in the sRGB colorspace. &nbsp;For example, the color “full-green with half translucency” is encoded as \x00\x80\x00\x80, and </span><span class="c5">not</span><span>&nbsp;\x00\xFF\x00\x80.</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>All imageFormat values defined in the EBDT / EBLC tables are valid for use with this extension.</span></p><h1 class="c2"><a name="h.6rnwmfne9w2o"></a><span>Compressed color bitmaps</span></h1><p class="c2"><span>Images for each individual glyph are stored as </span><span>straight PNG data</span><span>. &nbsp;Only the following chunks are allowed in such PNG data: IHDR, PLTE, tRNS, sRGB, IDAT, and IEND. &nbsp;If other chunks are present, the behavior is undefined. &nbsp;The image data shall be in the sRGB colorspace, regardless of color information that may be present in other chunks in the PNG data. &nbsp;The individual images must have the same size as expected by the table in the bitmap metric</span><span>s.</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>There are three new imageFormat values with PNG images: one with smallGlyphMetrics, one with bigGlyphMetrics, and one without glyph metrics. &nbsp;Only the value ‘32’ of the bitDepth field of bitmapSizeTable struct is supported at this time, regardless of the number of colors in the PNG images.</span></p><p class="c2 c3"><span></span></p><p class="c2"><span class="c9">Format 17: small metrics, PNG image data</span></p><a href="https://docs.google.com/a/google.com/document/d/1HiPmsNmIwvZaP-xCKuTQf7GsSbLyzmqjpB6vxAN1-Sg/pub#" name="98529efcf56695ef8a55c6f61521185675ffdd76"></a><a href="https://docs.google.com/a/google.com/document/d/1HiPmsNmIwvZaP-xCKuTQf7GsSbLyzmqjpB6vxAN1-Sg/pub#" name="0"></a><table cellpadding="0" cellspacing="0" class="c1"><tbody><tr><td class="c7"><p class="c0"><span class="c5">Type</span></p></td><td class="c4"><p class="c0"><span class="c5">Name</span></p></td><td class="c8"><p class="c0"><span class="c5">Description</span></p></td></tr><tr><td class="c7"><p class="c0"><span>smallGlyphMetrics</span></p></td><td class="c4"><p class="c0"><span>glyphMetrics</span></p></td><td class="c8"><p class="c0"><span>Metrics information for the glyph</span></p></td></tr><tr><td class="c7"><p class="c0"><span>ULONG</span></p></td><td class="c4"><p class="c0"><span>dataLen</span></p></td><td class="c8"><p class="c0"><span>Length of data in bytes</span></p></td></tr><tr><td class="c7"><p class="c0"><span>VARIABLE</span></p></td><td class="c4"><p class="c0"><span>data</span></p></td><td class="c8"><p class="c0"><span>Raw PNG data</span></p></td></tr></tbody></table><p class="c2 c3"><span></span></p><p class="c2"><span class="c9">Format 18: big metrics, PNG image data</span></p><a href="https://docs.google.com/a/google.com/document/d/1HiPmsNmIwvZaP-xCKuTQf7GsSbLyzmqjpB6vxAN1-Sg/pub#" name="78779e078f7a724fa764181a15ce6a1c939b5d53"></a><a href="https://docs.google.com/a/google.com/document/d/1HiPmsNmIwvZaP-xCKuTQf7GsSbLyzmqjpB6vxAN1-Sg/pub#" name="1"></a><table cellpadding="0" cellspacing="0" class="c1"><tbody><tr class="c6"><td class="c7"><p class="c0"><span class="c5">Type</span></p></td><td class="c4"><p class="c0"><span class="c5">Name</span></p></td><td class="c8"><p class="c0"><span class="c5">Description</span></p></td></tr><tr class="c6"><td class="c7"><p class="c0"><span>bigGlyphMetrics</span></p></td><td class="c4"><p class="c0"><span>glyphMetrics</span></p></td><td class="c8"><p class="c0"><span>Metrics information for the glyph</span></p></td></tr><tr class="c6"><td class="c7"><p class="c0"><span>ULONG</span></p></td><td class="c4"><p class="c0"><span>dataLen</span></p></td><td class="c8"><p class="c0"><span>Length of data in bytes</span></p></td></tr><tr class="c6"><td class="c7"><p class="c0"><span>VARIABLE</span></p></td><td class="c4"><p class="c0"><span>data</span></p></td><td class="c8"><p class="c0"><span>Raw PNG data</span></p></td></tr></tbody></table><p class="c2 c3"><span></span></p><p class="c2"><span class="c9">Format 19: metrics in CBLC, PNG image data</span></p><a href="https://docs.google.com/a/google.com/document/d/1HiPmsNmIwvZaP-xCKuTQf7GsSbLyzmqjpB6vxAN1-Sg/pub#" name="19ac52bb79225b399e218d890712025b9f420710"></a><a href="https://docs.google.com/a/google.com/document/d/1HiPmsNmIwvZaP-xCKuTQf7GsSbLyzmqjpB6vxAN1-Sg/pub#" name="2"></a><table cellpadding="0" cellspacing="0" class="c1"><tbody><tr class="c6"><td class="c7"><p class="c0"><span class="c5">Type</span></p></td><td class="c4"><p class="c0"><span class="c5">Name</span></p></td><td class="c8"><p class="c0"><span class="c5">Description</span></p></td></tr><tr class="c6"><td class="c7"><p class="c0"><span>ULONG</span></p></td><td class="c4"><p class="c0"><span>dataLen</span></p></td><td class="c8"><p class="c0"><span>Length of data in bytes</span></p></td></tr><tr class="c6"><td class="c7"><p class="c0"><span>VARIABLE</span></p></td><td class="c4"><p class="c0"><span>data</span></p></td><td class="c8"><p class="c0"><span>Raw PNG data</span></p></td></tr></tbody></table><p class="c2 c3"><span></span></p><p class="c2"><span>The image format numbers were specifically chosen to not conflict with those in the EBDT table and so allow for a possible consolidation in the future. Further image format numbers beyond those defined are reserved for future extensions as to the image type and/or the metadata.</span></p><h1 class="c2"><a name="h.eksgwaskwjhd"></a><span>Discussion</span></h1><p class="c2"><span>The aim of this specification is to enable support for color-emoji-only fonts. &nbsp;It is recommended that such fonts include no ‘glyf’ table, and as such be bitmap-only fonts. &nbsp;In the presence of color and non-color strikes in the same font, it is currently unspecified which bitmap a conformant client will choose for rendering.</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>In the presence of color images and a client that does </span><span class="c5">not</span><span>&nbsp;support color, the color images may be converted to colorless opacity maps in a way similar to:</span></p><p class="c2 c3"><span></span></p><p class="c2"><span>&nbsp; </span><img src="./v1-opacity.png"></p><p class="c2 c3"><span></span></p><p class="c2"><span>where </span><span class="c5">b</span><span>, </span><span class="c5">g</span><span>, </span><span class="c5">r</span><span>, and </span><span class="c5">a</span><span>&nbsp;are the color and alpha components of the input pixel normalized to [0.0,1.0], and </span><span class="c5">opacity</span><span>&nbsp;is the output opacity value for the pixel (0.0 means transparent, 1.0 means fully opaque). &nbsp;This formula undoes the </span><span>premultiplication</span><span>&nbsp;of color channels, applies sRGB-like gamma-correction, computes luminosity, and </span><span>combines with pixel alpha</span><span>&nbsp;to get to a final opacity level for the pixel.</span></p><h1 class="c2"><a name="h.rsytdtx63w3d"></a><span>Companions</span></h1><p class="c2"><span>See the </span><span class="c11"><a class="c12" href="https://code.google.com/p/color-emoji">color-emoji</a></span><span> project for tools generating fonts under this specification and patchsets to render such fonts.</span></p><p class="c2 c3"><span></span></p><h1 class="c2"><a name="h.f6bjzcfhhwm9"></a><span>Revision History</span></h1><p class="c2 c3"><span></span></p><p class="c2"><span class="c9">May 2013</span><span>&nbsp;Initial public release.</span></p></div></body></html>